<template>
    <div class="bigbox">
        <ETable :delelteAll="delnursingServiceAll" :columns="columns"  :loadData="getnursingService" :delelte="delnursingService" :isSearch="false" :isPage="true" :pageSize="[10,20,30]" ref="table" >
          <template #buttons="{delAll}">
            <el-button type="success" @click="add">新增护理服务</el-button>
            <el-button type="danger" @click="delAll">批量删除 </el-button>
          </template>
          <template #operation="{row , del}">

                <el-button type="primary"  @click="EDITOR(row.id,row.name,row.content)"> 编辑 </el-button> 
            
            <el-button type="danger"   @click="del(row.id)">删除 </el-button>
            
          </template>
  
         
        </ETable>

        <el-dialog v-model="open" title="添加部门">
          <el-form>
              <el-form-item label="服务名称">
                  <el-input v-model="form.name" placeholder="请输入服务名称"></el-input>
              </el-form-item>
              <el-form-item label="服务描述">
                  <el-input v-model="form.content" placeholder="请输入服务描述"></el-input>
              </el-form-item>
          </el-form>
          <template #footer>
              <el-button @click="open = false">取 消</el-button>
              <el-button type="primary" @click="submit">确 定</el-button>
          </template>
      </el-dialog>
    
    </div>
  </template>
  
  <script setup lang="ts">
import  {addnursingService,  delnursingService,  getnursingService ,delnursingServiceAll} from '../../apis/nursingService/nursingService';
  import ETable, { type ColumnType } from '../../components/ETable.vue';
  import { reactive, ref, useTemplateRef } from 'vue';
import ElMessage from 'element-plus/es/components/message/index.mjs';


const table=useTemplateRef('table')
const form=reactive({
    id:        0,
    companyId: 0,
    name:      '',
    content:   '',
})
const open=ref(false)
const add=()=>{
  open.value=true
}

const submit=()=>{
    addnursingService(form).then(res=>{
    console.log(res);
    ElMessage('添加成功')
    table.value!.getData()
  })
  open.value=false
  form.name=''
  form.content=''
}

const EDITOR=(id:number,name:string,content:string)=>{
    open.value=true
    form.name=name
    form.content=content
 console.log(id,name);
}

  const columns= reactive<ColumnType[]>([
  {
    prop: 'id',
    label: '序号',
    width: '',
  },
  {
    prop: 'name',
    label: '服务名称',
    width: '',
  },
  {
    prop: 'content',
    label: '服务描述',
    width: '',
  },
  {
    prop: 'operation',
    label: '操作',
    slot: true,
    width: '',
  },
  ])
  </script>
  
  <style scoped>
  .add{
    width: 20px;
    color: #fff;
  }
  </style>